<template>
  <view>
    <view v-if="cartList.length">
      <view
        v-if="address"
        class="address-container"
        @click="addressAction"
      >
        <view class="address-view">
          <view class="receive-view">
            <text>收货人：{{ address.userName }}</text>
            <text>电话：{{ address.telNumber }}</text>
          </view>
          <text class="address-text"
            >收货地址：{{
              address.provinceName +
              address.cityName +
              address.countyName +
              address.detailInfo
            }}</text
          >
        </view>
        <uni-icons type="arrowright" size="18"></uni-icons>
      </view>
      <view v-else class="address-empty" @click="addressAction">
        <uni-icons type="plusempty" size="20"></uni-icons>
        <text>请选择收货地址</text>
      </view>
      <image
        class="cart_border"
        src="@/static/cart_border@2x.png"
      ></image>
      <view class="shop-view">
        <uni-icons type="shop" size="20"></uni-icons>
        <text style="margin-left: 10rpx">购物车</text>
      </view>
      <view
        class="cart-item"
        v-for="item in cartList"
        :key="item.goods_id"
        @click="goodsAction(item)"
      >
        <radio
          color="#C00000"
          :checked="item.checked"
          @click.stop="checkedAction(item)"
        ></radio>
        <image :src="item.goods_small_logo"></image>
        <view class="right-content">
          <text> {{ item.goods_name }}</text>
          <view class="botton-content">
            <text>¥{{ item.goods_price }} </text>
            <stepper
              :count="item.count"
              @change="countAction(item, $event)"
            ></stepper>
          </view>
        </view>
      </view>
      <view class="bottom-container">
        <radio
          color="#C00000"
          :checked="allChecked"
          @click="selectAllAction"
          >全选</radio
        >
        <view class="total-view">
          <text>合计：</text>
          <text style="color: #c00000">¥{{ totalPrice }}</text>
        </view>
        <view class="settle-view">结算({{ totalCount }})</view>
      </view>
    </view>
    <view class="empty-view" v-else>
      <image src="@/static/cart_empty@2x.png"></image>
      <text>空空如也</text>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex"

export default {
  onLoad() {},

  onShow() {
    this.setTabBarBadge()
  },

  data() {
    return {
      address: null,
      allChecked: this.$store.getters.allSelect,
    }
  },

  methods: {
    addressAction() {
      uni.chooseAddress({
        success: (result) => {
          this.address = result
        },
      })
    },

    goodsAction(item) {
      this.$mrouter.push("/pages/detail/index", item.goods_id)
    },

    countAction(item, count) {
      this.$store.commit("countChange", { goods: item, count: count })
    },

    checkedAction(item) {
      this.$store.commit("checkedChange", item)
    },

    selectAllAction() {
      this.allChecked = !this.allChecked
      this.$store.commit("selectAll", this.allChecked)
    },

    setTabBarBadge() {
      const count = this.cartList.length
      if (count) {
        uni.setTabBarBadge({
          index: 2,
          text: String(count),
        })
      } else {
        uni.removeTabBarBadge({ index: 2 })
      }
    },
  },

  computed: {
    ...mapState(["cartList"]),

    totalCount() {
      return this.cartList
        .filter((item) => {
          return item.checked
        })
        .reduce((prev, cur) => {
          return prev + cur.count
        }, 0)
    },

    totalPrice() {
      return this.cartList
        .filter((item) => {
          return item.checked
        })
        .reduce((prev, cur) => {
          return prev + cur.goods_price * cur.count
        }, 0)
    },

    allSelect() {
      return this.cartList.every((item) => {
        return item.checked
      })
    },
  },

  watch: {
    allSelect(newVlue) {
      this.allChecked = newVlue
    },

    cartList(newVlue) {
      this.setTabBarBadge()
    },
  },
}
</script>

<style lang="scss" scoped>
.address-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  font-size: 30rpx;
}
.address-container {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  font-size: 28rpx;

  .address-view {
    flex: 1;
    margin-right: 20rpx;

    .receive-view {
      display: flex;
      justify-content: space-between;

      .phone-view {
        display: flex;
        align-items: center;
      }
    }

    .address-text {
      display: block;
      margin-top: 20rpx;
    }
  }
}

.cart_border {
  width: 100%;
  height: 15rpx;
}

.shop-view {
  display: flex;
  align-items: center;
  padding: 10rpx;
  font-size: 28rpx;
  border-bottom: 1rpx solid #e2e2e2;
}
.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  height: 180rpx;
  border-bottom: 1rpx solid #e2e2e2;

  image {
    width: 180rpx;
    height: 180rpx;
    margin: 0 20rpx;
  }

  .right-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    height: 100%;

    text {
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      font-size: 26rpx;
    }

    .botton-content {
      display: flex;
      justify-content: space-between;

      text {
        font-size: 32rpx;
        color: #c00000;
      }
    }
  }
}

.bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--window-bottom);
  border-top: 1px solid #e2e2e2;
  font-size: 28rpx;
  height: 100rpx;

  radio {
    display: flex;
    margin-left: 20rpx;
    height: 100%;
    align-items: center;
  }
  .settle-view {
    width: 200rpx;
    height: 100%;
    background-color: #c00000;
    text-align: center;
    line-height: 100rpx;
    color: white;
    font-size: 30rpx;
  }
}

.empty-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 350rpx;
  image {
    width: 200rpx;
    height: 200rpx;
  }
  text {
    margin-top: 20rpx;
    font-size: 28rpx;
  }
}
</style>
